import React,{Component,PropTypes} from 'react';

class CheckList extends Component{

    render(){
        //循环创建的视图 最好都加上key 注意是Key 不是id

        let tasks =this.props.tasks.map((task,taskIndex)=>(
            <li key={task.id} className="checklist_task">
                <input type="checkbox" defaultChecked={task.done} onChange={
                    this.props.taskCallbacks.toggle.bind(null,this.props.cardId,task.id,taskIndex)
                }/>
                {task.name}
                <a href="#" className="checklist_task--remove" onClick={
                    this.props.taskCallbacks.delete.bind(null,this.props.cardId,task.id,taskIndex)
                }/>
            </li>
        ));
        return(<div className="checklist">
            <ul>{tasks}</ul>
            <input type="text" className="checklist_add_task"
            placeholder="这里可以增加一个呦"
            onKeyPress={this.checkInputKeyPress.bind(this)}/>
        </div>);
    }

    //输入完按下 回车键  进行回调和存储
    checkInputKeyPress(evt){
        if (evt.key==='Enter'){
            this.props.taskCallbacks.add(this.props.cardId,evt.target.value);
            evt.target.value='';
        }
    }
}

CheckList.propTypes ={
    tasks:PropTypes.arrayOf(PropTypes.object),
    taskCallbacks:PropTypes.object
}
export default CheckList;